<template>
  <div>
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未用红包" name="first"></el-tab-pane>
        <el-tab-pane label="已用红包" name="second"></el-tab-pane>
        <el-tab-pane label="过期红包" name="third"></el-tab-pane>
      </el-tabs>
        <el-table
          :data="capital"
          border
          style="width: 100%">
          <el-table-column v-for="(item,index) in capitalTit" :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width">
          </el-table-column>
        </el-table>
        <div style="margin: 30px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      id:this.$route.params.id,
      capitalTit:[{
          prop:'fJe',
          label:'红包金额',
          width: '180'
        },{
          prop:'tDate',
          label:'生效时间',
          width: '180'
        },{
          prop:'tLqsj',
          label:'激活时间',
          width: '180'
        },{
          prop:'fDqsj',
          label:'到期时间',
          width: '180'
        },{
          prop:'cSm',
          label:'红包类型',
          width: '180'
        },{
          prop:'fJe*100',
          label:'使用条件',
          width: '180'
        }
      ],
      capital:[],
      total: 0,
      pageSize: 20,
      currentPage: 1
    }
  },
  methods: {
    handleCurrentChange(val) {
      if (this.activeName === 'first') this.getFirstDate(val)
      if (this.activeName === 'second') this.getSecondtDate(val)
      if (this.activeName === 'third') this.getThirdDate(val)
    },
    getFirstDate (page) {
      if (page == 1) this.currentPage=1
      this.$get(this,{api:'member/loadNoRedPacket.do',data: {
        fUid:this.id,
        pageSize: this.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          if (page == 1) {
            this.total = data.content[0];
          }
          this.capital = data.content[1];
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    getSecondtDate (page) {
      if (page == 1) this.currentPage=1      
      this.$get(this,{api:'member/loadUsedRedPacket.do',data: {
        fUid:this.id,
        pageSize: this.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          if (page == 1) {
            this.total = data.content[0];
          }
          this.capital = data.content[1];
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    getThirdDate (page) {
      if (page == 1) this.currentPage=1      
      this.$get(this,{api:'member/loadExpiredRedPacket.do',data: {
        fUid:this.id,
        pageSize: this.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          if (page == 1) {
            this.total = data.content[0];
          }
          this.capital = data.content[1];
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    handleClick(tab, event) {
      if (this.activeName === 'first') this.getFirstDate(1)
      if (this.activeName === 'second') this.getSecondtDate(1)
      if (this.activeName === 'third') this.getThirdDate(1)
    }
  },
  mounted () {
    this.getFirstDate(1)
  }
}
</script>


